<template>
<div :class="['app-list', this.items.length > 0 ? '' : 'app-list-empty' ]">
      <div v-if="items.length > 0" style="height: calc(100% - 35px);overflow-y:auto;">
        <div
            v-for="item in items"
            :key="item.srfkey"
            :class="['app-list-item', {'isSelect': item.isselected === true ? true : false}]"
            @click="handleClick(item)"
            @dblclick="handleDblClick(item)"
        >
            <div class="app_list_index_item" style="padding-left: 20px;"> {{item.index_type}} # {{item.srfkey}} / <span  v-html='item.srfmajortext'></span></div>
				<div class="app_list_index_item" style="overflow-x:auto;padding-left: 20px;" v-html='item.indexdesc'></div>
        </div>
    </div>
    <div v-else>
        {{$t('entities.ibizproindex.indexmob_list.nodata')}}
        <span class="quick-toolbar">
        </span>
    </div>
    <row class="list-pagination" v-show="items.length > 0">
        <page class="pull-right" @on-change="pageOnChange($event)" 
            @on-page-size-change="onPageSizeChange($event)"
            :total="totalRecord"
            show-sizer :current="curPage" :page-size="limit"
            :page-size-opts="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]" show-elevator show-total>
            <span>
                <span class="page-button"><i-button icon="md-refresh" :title="$t('app.gridpage.refresh')" @click="pageRefresh()"></i-button></span>&nbsp;
                <span>
                    {{$t('app.gridpage.show')}}&nbsp;
                    <span>
                        <template v-if="items.length === 1">
                        1
                        </template>
                        <template v-else>
                            <span>{{(curPage - 1) * limit + 1}}&nbsp;-&nbsp;{{totalRecord > curPage * limit ? curPage * limit : totalRecord}}</span>
                        </template>
                    </span>&nbsp;
                    {{$t('app.gridpage.records')}}，{{$t('app.gridpage.totle')}}&nbsp;{{totalRecord}}&nbsp;{{$t('app.gridpage.records')}}
                </span>
            </span>
        </page>
    </row>
</div>
</template>
<script lang="tsx">
import { Component } from 'vue-property-decorator';
import { VueLifeCycleProcessing } from '@/studio-core';
import { IndexMobListBase } from './index-mob-list-base';
 

/**
 * list部件
 *
 * @export
 * @class IndexMobList
 * @extends {IndexMobListBase}
 */
@Component({
    components: {
         
    },
})
@VueLifeCycleProcessing()
export default class IndexMobList extends IndexMobListBase {}
</script>
